import { App, DirectiveBinding } from 'vue'

export default (app:App<Element>) => {
    app.directive('btnAntiShake', {
        mounted(el: HTMLElement, bind: DirectiveBinding) {
            //定义一个定时器
            let timer: NodeJS.Timeout | null = null
            //bind的值是按钮的回调时间
            el.addEventListener('click', () => { 
                let firstClick: Boolean = !timer;
                if (firstClick) { 
                    bind.value();
                }
                if (timer) { 
                    clearTimeout(timer);
                }
                timer = setTimeout(() => {
                    //准备执行最后一次请求，并且清空执行器所占用的内存
                    timer = null;
                    if (!firstClick) {
                        //执行最后一次请求
                        bind.value()
                    }
                }, 1000);
            },false)
        }
    })
}